<template>
  <el-cascader
    v-bind="$attrs"
    v-on="$listeners"
    popper-class="v-cascader-hide-radio"
    :show-all-levels="false"
    :options="bankTree"
    :props="props"
    :value="arryValue"
    v-loading="loading"
    @change="handleCascaderChange"
    ref="cascader"
  >
    <div slot-scope="{ node, data }" @click="handleItemChange(node, data)">
      <span>{{ node.label }}</span>
    </div>
  </el-cascader>
</template>

<script>
import { cascaderParse } from '@vimi/utils-tool'
import { mapGetters } from 'vuex'
export default {
  props: {
    value: String,
  },
  model: {
    prop: 'value',
    event: 'setValue',
  },
  data() {
    return {
      loading: false,
      props: {
        value: 'agency_id',
        label: 'agency_name',
        checkStrictly: true,
      },
      bankTree: [],
      selectAll: [],
      arryValue: [],
      select: '',
    }
  },
  computed: {
    ...mapGetters(['clientId', 'user']),
  },
  watch: {
    value() {
      this.init(this.value)
    },
  },
  created() {
    this.getBanks()
  },
  methods: {
    getBanks() {
      this.loading = true
      //  this.$api
      //   .getData(this.$serviceName, 'credit_agency_access_bank_view_select', {
      //     'agency_type.eq': 1,
      //     'bus_type.eq': 1,
      //     'service_id.eq': this.clientId,
      //     groupFields: 'agency_id',
      //   })
      this.$api
        .getData(this.$serviceName, 'credit_agency_info_view', {
          'agency_type.eq': 1,
        })
        .then(res => {
          this.selectAll = res?.data ?? []
          this.bankTree = cascaderParse({
            data: this.selectAll,
            key: 'agency_code',
            parentKey: 'parent_code',
            checkParent: true,
          })
          this.init(this.value)
        })
        .finally(() => {
          this.loading = false
        })
    },
    init(val) {
      this.arryValue = []
      const first = this.selectAll.find(item => item.agency_id === val) || {}
      if (!first) {
        return
      }
      this.arryValue.unshift(first.agency_id)
      this.initSetCode(first.parent_code)
    },
    initSetCode(code) {
      const item = this.selectAll.find(item => item.agency_code === code)
      if (item) {
        this.arryValue.unshift(item.agency_id)
        this.initSetCode(item.parent_code)
      }
    },
    handleCascaderChange() {
      this.$nextTick(() => {
        const selectNode = this.$children[0].getCheckedNodes()
        const node = selectNode.length ? selectNode[selectNode.length - 1] : {}
        this.select = (node && node.value) || ''
        this.$emit('setValue', this.select)
        this.$emit('select', (node && node.data) || {})
        this.$emit('change', this.select, (node && node.pathLabels) || [])
        if (!node.hasChildren) {
          this.toggleDropDownVisible(false)
        }
      })
    },
    async handleItemChange(node) {
      this.select = (node && node.value) || ''
      this.$emit('setValue', this.select)
      this.$emit('select', (node && node.data) || {})
      this.$emit('change', this.select, (node && node.pathLabels) || [])
      if (!node.hasChildren) {
        this.toggleDropDownVisible(false)
      }
    },
    getCheckedNodes() {
      return this.$refs.cascader.getCheckedNodes()
    },
    // element-ui 官方没有对外暴露的接口，版本更换时需小心
    toggleDropDownVisible(visible) {
      const ref = this.$children[0]
      ref && ref.toggleDropDownVisible(visible)
    },
  },
}
</script>

<style scoped></style>
